<template>
  <view class="page">
    <Header></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-听说考试-查看学习报告'"> </Breadcrumb>
        <view class="content">
          <view class="box">
            <view class="header">
              <view class="title">
                <view class="title_content">
                  {{ chapterInfo.name }}/ 报告解析
                </view>
                <view class="title_bg">
                  <image
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/ipad/title_bg2.png"
                    mode="widthFix"
                  ></image>
                </view>
              </view>
              <view class="tabs">
                <view
                  class="tabs_content"
                  :class="{
                    active: currentIndex === 0,
                  }"
                  @click="handleChangeIndex(0)"
                >
                  听后选择
                </view>
                <view
                  class="tabs_content"
                  :class="{
                    active: currentIndex === 1,
                  }"
                  @click="handleChangeIndex(1)"
                >
                  听后记录
                </view>
                <view
                  class="tabs_content"
                  :class="{
                    active: currentIndex === 2,
                  }"
                  @click="handleChangeIndex(2)"
                >
                  朗读短文
                </view>
              </view>
            </view>
            <view class="section">
              <view class="chart">
                <qiun-data-charts
                  :opts="opts"
                  type="radar"
                  :chartData="chartData"
                  background="none"
                />
              </view>
              <view class="list">
                <view class="item" v-if="currentIndex === 0">
                  <view class="item_title">
                    <text>听后选择</text>
                  </view>
                  <view class="subject" v-if="questionList.length > 0">
                    <view
                      class="subject_content"
                      v-for="(item, index) in questionList"
                      :key="index"
                    >
                      <u-collapse v-if="collapsekey">
                        <u-collapse-item>
                          <view class="subject_text">
                            {{ item.audioContent }}
                          </view>
                          <template slot="title">
                            <view class="subject_title">
                              <view class="subject_number">
                                <text>{{ index + 1 }}</text>
                              </view>
                              <view
                                class="subject_icon"
                                :class="{
                                  active: item.playStatus,
                                }"
                                @click.stop="control1(item)"
                              >
                                <image
                                  v-show="item.playStatus"
                                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/suspend.png"
                                  mode="widthFix"
                                  style="width: 18rpx"
                                ></image>
                                <image
                                  v-show="!item.playStatus"
                                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/play.png"
                                  mode="widthFix"
                                  style="width: 18rpx"
                                ></image>
                              </view>
                              <view class="subject_tips">
                                <text>展开原文</text>
                              </view>
                            </view>
                          </template>
                        </u-collapse-item>
                      </u-collapse>
                      <view
                        class="subject_list"
                        v-for="(element, i) in item.items"
                        :key="i"
                      >
                        <view class="subject_name">
                          {{ element.optionText }}
                        </view>
                        <view class="options">
                          <view
                            class="options_content"
                            v-for="(option, key) in element.optionsList"
                            :key="key"
                          >
                            <view class="options_image">
                              <template
                                v-if="element.optionAnswer === option.name"
                              >
                                <image
                                  v-if="element.optionAnswer === option.name"
                                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                                  mode="widthFix"
                                ></image>
                              </template>
                              <template v-else>
                                <image
                                  v-if="
                                    element.choiceAnswer ===
                                      element.optionAnswer &&
                                    element.choiceAnswer === option.name
                                  "
                                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                                  mode="widthFix"
                                ></image>
                                <image
                                  v-else-if="
                                    element.choiceAnswer !==
                                      element.optionAnswer &&
                                    element.choiceAnswer === option.name
                                  "
                                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
                                  mode="widthFix"
                                ></image>
                                <view class="options_circle" v-else> </view>
                              </template>
                            </view>
                            <view class="options_text">
                              {{ option.value }}
                            </view>
                          </view>
                        </view>
                        <view class="choice_answer">
                          <view class="choice_answer_content">
                            <text>我的答案: </text>
                            <text style="color: #f80000">{{
                              element.choiceAnswer || "未选择"
                            }}</text>
                          </view>
                          <view class="choice_answer_content">
                            <text>参考答案: </text>
                            <text style="color: #1cd786">{{
                              element.optionAnswer
                            }}</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="item" v-if="currentIndex === 1">
                  <view class="item_title">
                    <text>听后记录</text>
                  </view>
                  <view class="subject" v-if="questionList.length > 0">
                    <view
                      class="subject_content"
                      v-for="(item, index) in questionList"
                      :key="index"
                    >
                      <u-collapse v-if="collapsekey">
                        <u-collapse-item>
                          <view class="subject_text">
                            {{ item.audioContent }}
                          </view>
                          <template slot="title">
                            <view class="subject_title">
                              <view class="subject_number">
                                <text>{{ index + 1 }}</text>
                              </view>
                              <view
                                class="subject_icon"
                                :class="{
                                  active: item.playStatus,
                                }"
                                @click.stop="control1(item)"
                              >
                                <image
                                  v-show="item.playStatus"
                                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/suspend.png"
                                  mode="widthFix"
                                  style="width: 18rpx"
                                ></image>
                                <image
                                  v-show="!item.playStatus"
                                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/play.png"
                                  mode="widthFix"
                                  style="width: 18rpx"
                                ></image>
                              </view>
                              <view class="subject_tips">
                                <text>展开原文</text>
                              </view>
                            </view>
                          </template>
                        </u-collapse-item>
                      </u-collapse>
                      <view class="subject_iamage">
                        <image :src="item.fileUrl" mode="widthFix"></image>
                      </view>
                      <view class="record_answer">
                        <view class="record_answer_title">
                          <text>我的答案:</text>
                        </view>
                        <view
                          class="record_answer_content"
                          v-for="(element, i) in item.items"
                          :key="i"
                        >
                          <view class="record_answer_box">
                            <text>{{ i + 1 }}.</text>
                            <text style="color: #f80000">{{
                              element.userRec.userAnswer || "未作答"
                            }}</text>
                          </view>
                          <view class="record_answer_box">
                            <text>参考答案：</text>
                            <text style="color: #1cd786">{{ element.optionAnswer }}</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="item" v-if="currentIndex === 2">
                  <view class="item_title">
                    <text>朗读短文</text>
                  </view>
                  <view class="subject" v-if="questionList.length > 0">
                    <view
                      class="subject_content"
                      v-for="(item, index) in questionList"
                      :key="index"
                    >
                      <view class="subject_title active">
                        <view class="subject_number">
                          <text>{{ index + 1 }}</text>
                        </view>
                      </view>
                      <view class="subject_text">
                        {{ item.audioContent }}
                      </view>
                      <view v-for="(element, i) in item.items" :key="i">
                        <view class="article_answer">
                          <view class="article_answer_title">
                            <text>我的答案:</text>
                          </view>
                          <view
                            class="article_answer_icon"
                            @click="control2(item, i)"
                          >
                            <image
                              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/play.png"
                              mode="widthFix"
                              style="width: 15rpx"
                            ></image>
                          </view>
                        </view>
                        <view class="score" v-if="element.userRec">
                          <view class="score_content">
                            <text class="active">{{
                              element.userRec.totalScore
                            }}</text>
                            <text>得分</text>
                          </view>
                          <view class="score_content">
                            <text>{{ element.userRec.completeScore }}</text>
                            <text>完整度</text>
                          </view>
                          <view class="score_content">
                            <text>{{ element.userRec.fluencyScore }}</text>
                            <text>流利度</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { elstStatistics, elstStatisticsHistory } from "@/api/elst";
export default {
  components: {},
  data() {
    return {
      bookInfo: {},
      chapterInfo: {},
      chartData: {
        categories: ["听后选择", "听后记录", "朗读短文"],
        series: [],
      },
      opts: {
        legend: {
          show: true,
          position: "bottom",
        },
        extra: {
          radar: {
            max: 10,
          },
        },
      },
      currentIndex: 0,
      type: "",
      chapterId: "",
      historyId: "",
      taskId: "",
      statisticsList: [],
      questionList: [],
      collapsekey: true,
    };
  },
  onLoad(option) {
    this.chapterId = option.chapterId;
    this.type = option.type;
    this.historyId = option.historyId;
    this.init();
  },
  methods: {
    init() {
      //default
      this.getStatistics();
    },
    getStatistics() {
      if (this.historyId) {
        let params = {
          historyId: this.historyId,
          taskId: this.taskId,
        };
        elstStatisticsHistory(params).then((res) => {
          this.bookInfo = res.data.book;
          this.chapterInfo = res.data.chapter;
          this.statisticsList = res.data.tasks;
          this.questionList = res.data.questions;
          this.handleChartData();
          this.hanleQuestionData();
          this.changeCollapsekeyStatus();
        });
      } else {
        let params = {
          chapterId: this.chapterId,
          type: this.type,
          taskId: this.taskId,
        };
        elstStatistics(params).then((res) => {
          this.bookInfo = res.data.book;
          this.chapterInfo = res.data.chapter;
          this.statisticsList = res.data.tasks;
          this.questionList = res.data.questions;
          this.handleChartData();
          this.hanleQuestionData();
          this.changeCollapsekeyStatus();
        });
      }
    },
    handleChartData() {
      let totalScore = [];
      let score = [];
      this.statisticsList.forEach((item) => {
        totalScore.push(item.sum);
        score.push(item.score);
      });
      this.chartData.series = [
        {
          name: "总分",
          data: totalScore,
        },
        {
          name: "我的得分",
          data: score,
        },
      ];
    },
    hanleQuestionData() {
      if (this.currentIndex === 0) {
        this.questionList.forEach((item) => {
          item.items.forEach((element) => {
            let anArray = [];
            if (element.optionA) {
              anArray.push({
                name: "A",
                value: element.optionA,
              });
            }
            if (element.optionB) {
              anArray.push({
                name: "B",
                value: element.optionB,
              });
            }
            if (element.optionC) {
              anArray.push({
                name: "C",
                value: element.optionC,
              });
            }
            if (element.optionD) {
              anArray.push({
                name: "D",
                value: element.optionD,
              });
            }
            this.$set(element, "optionsList", anArray);
            this.$set(element, "choiceAnswer", element.userRec.userAnswer);
          });
        });
      }
    },
    handleChangeIndex(index) {
      if (index === this.currentIndex) return;
      this.currentIndex = index;
      this.taskId = this.statisticsList[this.currentIndex].id;
      this.getStatistics();
    },
    changeCollapsekeyStatus() {
      this.collapsekey = false;
      this.$nextTick(function () {
        this.collapsekey = true;
      });
    },
    control1(item) {
      let audioUrl = item.prepareUrl;
      if (item.playStatus) {
        this.suspend(item);
      } else {
        this.play(item, audioUrl);
      }
    },
    control2(item, i) {
      let audioUrl = item.items[i].userRec.userAnswer;
      if (item.playStatus) {
        this.suspend(item);
      } else {
        this.play(item, audioUrl);
      }
    },
    play(item, url) {
      if (this.isPlaying) return;
      this.audio = uni.createInnerAudioContext();
      this.audio.src = url;
      this.audio.play();
      this.audio.onEnded(() => {
        this.isPlaying = false;
        this.$set(item, "playStatus", false);
      });
      this.audio.onError(() => {
        this.isPlaying = false;
        this.$set(item, "playStatus", false);
      });
      this.isPlaying = true;
      this.$set(item, "playStatus", true);
    },
    suspend(item) {
      this.isPlaying = false;
      this.audio.pause();
      this.$set(item, "playStatus", false);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./examinationReportDetail.scss";
</style>
